<script setup>
import { useStore } from 'vuex'
import { computed } from 'vue'
const store = useStore()
const userNav = computed(() => {
  return store.state.user.userNav
})
defineProps({
  isCollapse: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <div class="main-aside">
    <div class="logo">
      <img src="https://s1.boluo.link/imgs/2022/11/30/2350b106919ffdf9.png" />
      <span v-if="!isCollapse">水利管理系统</span>
    </div>
    <div class="content">
      <el-menu
        default-active="/meetting"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        :collapse-transition="false"
        router
      >
        <template v-for="item in userNav" :key="item.nId">
          <el-menu-item :index="'/' + item.nUrl.split('/')[2]">
            <el-icon><location /></el-icon>
            <span>{{ item.nName }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<style lang="less" scoped>
:deep(.el-menu) {
  border: none;
}
:deep(.el-menu-item.is-active) {
  background: #f5f8fd;
}
.main-aside {
  height: 100vh;
  background: #fafcfd;
  .logo {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 31px;
      height: 29px;
    }
    span {
      margin-left: 10px;
      color: rgba(97, 104, 128, 1);
      font-size: 18px;
      font-weight: 600;
    }
  }
}
</style>
